<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <title>修改密码</title>
    <link th:href="@{/img/Bandit.ico}" rel="icon">
    <link th:href="@{/layui/css/layui.css}" rel="stylesheet">
    <link th:href="@{/editor.md-master/css/editormd.css}" rel="stylesheet" >
    <style>
        .layui-input-block{
            display: flex;
            flex-direction: row;
            align-items: center;
        }
        .layui-input-block input{
            width: 800px;
        }
        .layui-icon{
            font-size: 32px;
        }
    </style>
</head>
<body>
<div class="layui-layout layui-layout-admin">
    <div th:replace="~{commons/common::BackHeader}"></div>
    <div class="layui-body">
        <fieldset class="layui-elem-quote">新增用户</fieldset>
        <form class="layui-form" id="userAdd" style="width: 1000px">
            <!--标题-->
            <div class="layui-form-item">
                <label class="layui-form-label">用户名</label>
                <div class="layui-input-block">
                    <input type="text" class="layui-input" name="username" id="username" th:value="${user.username}" placeholder="输入用户名" autocomplete="false" required lay-verify= "required|username">

                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">旧密码</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="oldpassword" id="oldpassword" placeholder="输入旧密码" autocomplete="false" required lay-verify= "required|oldpass">
                    <span><i id="oldIcon" hidden="hidden"></i></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">新密码</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="newpassword" id="newpassword" placeholder="输入新密码" autocomplete="false" required lay-verify= "required|newpass">
                    <span><i id="newIcon" hidden="hidden"></i></span>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">确认新密码</label>
                <div class="layui-input-block">
                    <input type="password" class="layui-input" name="repassword" id="repassword" placeholder="再输入一遍" autocomplete="false" required lay-verify= "required|newpass">
                    <span><i id="reIcon" hidden="hidden"></i></span>
                </div>
            </div>
            <!--类型-->
            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <select name="permission" lay-filter="type" id="typeSelect">
                        <option th:each="permission,permissionStat:${permissionList}" th:value="${permission}" th:text="${permission}" th:selected="${permission eq user.permission}"></option>
                    </select>
                </div>
            </div>

            <input id="id" type="hidden" name="id" th:value="${user.id}">
            <input id="oldpwd" type="hidden" th:value="${user.password}">
            <div class="layui-form-item">
                <div class="layui-input-block">

                    <button class="layui-btn" lay-submit="" lay-filter="pwd-submit" id="save_btn">提交修改</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/layui/layui.js}"></script>
<script type="text/javascript">
    var prefix = "/back/user";
    $('#userAdd').on('submit', function (e){
        let layer;
        layui.use(['layer','upload'],function(){
            layer = layui.layer;
            layer.load(1);
        })
        e.preventDefault();
        let Data = $(this).serializeArray();
        console.log(Data);
        if(oldflag==1&&newflag==1){
            $.ajax({
                type: 'POST',
                url: prefix + '/editConfirm',
                data: {
                    "username":Data[0].value,
                    "password":Data[2].value,
                    "permission":Data[4].value,
                    "id":Data[5].value
                },
                dataType: 'json',
                success: function (res) {
                    console.log(res.msg);
                    parent.layer.closeAll();
                    layer.msg('修改成功！请重新登陆！');
                    setTimeout(function(){
                        parent.layer.closeAll();
                        window.location.href = "/logout";
                    },2000)
                },
                error: function () {
                    console.log("错误");
                }
            })
        }else if(oldflag!=1){
            layer.msg('旧密码有误');
            setTimeout(function(){
                parent.layer.closeAll();
                window.location.href = prefix + '/edit';
            },2000)
        }else if(newflag!=1){
            layer.msg('新密码有误');
            setTimeout(function(){
                parent.layer.closeAll();
                window.location.href = prefix + '/edit';
            },2000)
        }
    });
</script>
<script>
    function oldAndRe(){
        if (newpwd.val() != repwd.val()) {
            newpwd.css("border-color", "red");
            repwd.css("border-color", "red");
            $('#newIcon').prop({"class": "layui-icon layui-icon-close", "hidden": "", "style": "color: red"});
            $('#reIcon').prop({"class": "layui-icon layui-icon-close", "hidden": "", "style": "color: red"});
        } else if (newpwd.val() == repwd.val()&&newpwd.val()!=''&&repwd.val()!='') {
            newflag = 1;
            newpwd.css("border-color", "");
            repwd.css("border-color", "");
            $('#newIcon').prop({"class": "layui-icon layui-icon-ok", "hidden": "", "style": "color: green"});
            $('#reIcon').prop({"class": "layui-icon layui-icon-ok", "hidden": "", "style": "color: green"});
        }
    }
</script>
<script>
    var oldpwd = $('#oldpassword');
    var newpwd = $('#newpassword');
    var repwd = $('#repassword');
    var oldflag = 0;
    var newflag = 0;
    oldpwd.on("blur",function (){
        $.ajax({
            type: 'POST',
            url: prefix + '/oldPwd',
            data:{
                "password":oldpwd.val()
            },
            success(res){
                if(res.data=="correct"){
                    oldflag = 1;
                    console.log("密码正确")
                    oldpwd.css("border-color","");
                    $('#oldIcon').prop({"class":"layui-icon layui-icon-ok","hidden":"","style":"color: green"});
                }else if(res.data=="error") {
                    console.log("密码错误")
                    oldpwd.css("border-color","red");
                    $('#oldIcon').prop({"class":"layui-icon layui-icon-close","hidden":"","style":"color: red"});
                }else {
                    console.log("错误")
                }
            }
        })
    })
    newpwd.on("blur",function () {
        oldAndRe();
    });
    repwd.on("blur",function (){
        oldAndRe();
    });
</script>
</body>
</html>